<template>
  <div>
    <a-card>
      <div class="text-xl font-bold mb-4">工单管理</div>
      <a-row :gutter="[32, 8]" :style="{ minHeight: '900px' }">
        <a-col :span="24">
          在线工单
          <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
          <template #car="{ row }">
              {{row.car?row.car.serial:''}}
            </template>
            <template #state="{ row }">
              <a-tag color="warning" v-if="row.state == 0">未派单</a-tag>
              <a-tag color="success" v-else>已派单</a-tag>
            </template>

            <template #way="{ row }">
              <a-badge status="success" text="正常报修" v-if="row.way == 1" />
              <a-badge status="error" text="现场抢修" v-else />
            </template>

            <template #action="{ row }">
              <vxe-button
                status="primary"
                content="派单"
                @click="accept(row)"
              ></vxe-button>
            </template>
          </vxe-grid>
        </a-col>
      </a-row>
      <a-modal v-model:open="open" centered :footer="false" width="960px">
        <p class="text-lg font-bold">派发维修单</p>
        <a-form
          ref="formRef"
          :model="ticketForm"
          :label-col="{ span: 2 }"
          :wrapper-col="{ span: 24 }"
          class="border border-gray-200 solid"
        >
          <a-form-item
            label="报修单"
            name="repair_order_no"
            :rules="[
              ruleStore.getRule('repair_order_no')
                ? ruleStore.getRule('repair_order_no')
                : { required: false },
            ]"
          >
            <a-input
              v-model:value="ticketForm.repair_order_no"
              disabled
            ></a-input>
          </a-form-item>

          <a-form-item
            v-if="ticketForm.repair_way == 1"
            label="车位"
            name="parking_id"
            :rules="[
              ruleStore.getRule('parking_id')
                ? ruleStore.getRule('parking_id')
                : { required: false },
            ]"
          >
            <a-select
              v-model:value="ticketForm.parking_id"
              :options="options.parkingOptions"
            >
            </a-select>
          </a-form-item>

          <a-form-item
            label="车型"
            name="kind_id"
            :rules="[
              ruleStore.getRule('kind_id')
                ? ruleStore.getRule('kind_id')
                : { required: false },
            ]"
          >
            <a-select
              v-model:value="ticketForm.kind_id"
              :options="options.typeOptions"
            >
            </a-select>
          </a-form-item>

          <a-form-item
            label="维修工"
            name="user_ids"
            :rules="[
              ruleStore.getRule('user_ids')
                ? ruleStore.getRule('user_ids')
                : { required: false },
            ]"
          >
            <a-select
              v-model:value="ticketForm.user_ids"
              mode="multiple"
              placeholder="选择维修工"
              style="width: 100%"
              show-search
              :default-active-first-option="false"
              :not-found-content="null"
              :filter-option="false"
              :options="options.userOptions"
            >
            </a-select>
          </a-form-item>

          <a-form-item
            label="服务项目"
            name="service_ids"
            :rules="[
              ruleStore.getRule('service_ids')
                ? ruleStore.getRule('service_ids')
                : { required: false },
            ]"
          >
            <a-select
              v-model:value="ticketForm.service_ids"
              mode="multiple"
              placeholder="选择项目"
              style="width: 100%"
              show-search
              :default-active-first-option="false"
              :not-found-content="null"
              :filter-option="false"
              :options="options.servicesOptions"
              @search="handleServiceSearch"
            >
            </a-select>
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 2, span: 2 }">
            <a-button type="primary" style="width: 100px" @click="onSubmit"
              >提交</a-button
            >
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import Api from "@/api/backend/api";
import { debounce } from "lodash-es";

import useRuleStore from "@/store/modules/rule";
const { gridOptions,carOptions } = useRepairOnline();
const xGrid = ref();
const ruleStore = useRuleStore();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    //重新加载一下form搜索
    let item = grid.getFormItems(1);
    item.itemRender.props.options = carOptions.value;
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};
const open = ref(false);
const accept = (row) => {
  open.value = true;
  ticketForm.value.repair_id = row.id;
  ticketForm.value.repair_order_no = row.order_no;
  ticketForm.value.repair_way = row.way;
};
const options = ref({
  typeOptions: [],
  userOptions: [],
  servicesOptions: [],
  parkingOptions: [],
});
const formRef = ref();
const ticketForm = ref({
  repair_order_no: "",
  repair_id: null,
  kind_id: null,
  repair_way: 2,
  parking_id: null,
  user_ids: [],
  service_ids: [],
});

const getTypeOption = async () => {
  let data = await Api.kindController.option();
  options.value.typeOptions = data.map((item) => {
    return {
      label: item.union_name,
      value: item.id,
    };
  });
};

const getParkingOption = async () => {
  let data = await Api.parkingController.option();
  options.value.parkingOptions = data.map((item) => {
    return {
      label: `${item.parking_type}${item.no}`,
      value: item.id,
    };
  });
};
getTypeOption();
getParkingOption();
const handleServiceSearch = debounce(async (value) => {
  console.log("fetching service", value);
  if (value == "") return;

  options.value.servicesOptions = [];
  let data = await Api.serviceController.option({
    name: value,
  });
  options.value.servicesOptions = data.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
}, 300);



const employeeList = async () => {
  let data  = await Api.userController.employeeList();
  options.value.userOptions = data.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
};
employeeList();
const onSubmit = async () => {
  try {
    //先清空一下验证
    formRef.value.clearValidate();
    await Api.ticketController.start(ticketForm.value);
    xGrid.value.commitProxy("query");
    formRef.value.resetFields();
    open.value = false;
  } catch (error) {
    formRef.value.validate();
  }
};
</script>

<style></style>
